<style lang="less">
  #new-house-detail {
    background: #3d3936 url(~@/assets/pcindex_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    .house-detail {
      min-height: 600px;
      .house-title {
        width: 1190px;
        margin: 0 auto;
        padding: 3em 0 1em 0;
        h1 {
          margin: 0;
          padding: 0;
          line-height: normal;
          font-weight: normal;
        }
        .price {
          color: red;
          font-weight: normal;
          em {
            font-size: 80%;
            font-style: normal;
            span{
              font-size: 50%;
              margin-left: 1em;
            }
          }
        }
        .unit-price {
          color: #999;
          margin-left: .8em;
        }
      }
      background: #fff;
      .banner {
        margin: 0 auto;
        padding: 2em 0;
        width: 1190px;
        img {
          width: 100%;
          height: 360px;
        }
      }
      .content {
        display: flex;
        flex-direction: row;
        margin: 1em auto;
        width: 1190px;
        .main {
          min-width: 820px;
          flex: 1 1 0;
          margin-right: 5em;
          > div {
            margin-bottom: 3em;
          }
          h2 {
            border-bottom: solid 1px #eee;
            margin: 1em auto;
            font-weight: normal;
            padding-bottom: .3em;
          }
          table {
            margin: 2em auto;
            width: 100%;
            th {
              width: 15%;
              text-align: right;
              vertical-align: top;
            }
            th, td {
              padding: .5em;
            }
          }
          .tag span{
            margin-right: 1em;
          }
        }
        .design-sketch {
          .list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: space-between;
            .img {
              width: 49.6%;
              min-width: 0;
              margin-bottom: 2.5em;
              height: 280px;
              overflow: hidden;
              display: flex;
              justify-content: center;
              img {
                max-height: 100%;
                display: block;
              }
            }
          }
        }
      }
    }
  }
</style>
<template>
  <div id="new-house-detail">
    <Navigator></Navigator>
    <div class="search">
      <GlobalSearchInput tab="new"></GlobalSearchInput>
    </div>
    <div class="house-detail">
      <template v-if="house.houseInfo">
        <div class="house-title">
          <h1>
            {{_.get(house, 'houseInfo.name')}}
            <span class="price">
              <em><span>参考价:</span>{{_.get(house, 'houseInfo.unitPrice')}}元/㎡</em>
            </span>
          </h1>
        </div>
        <div class="banner">
          <img :src="_.get(house,'houseInfo.houseImage.firstPic') | houseDetailsBigPic"/>
        </div>
        <div class="content">
          <div class="main">
        
            <div class="basic-info">
              <h2>基本信息</h2>
              <table>
                <tr>
                  <th>所属区域</th>
                  <td>{{_.get(house, 'houseInfo.owerZone')}}</td>
                  <th>环线位置</th>
                  <td>{{_.get(house, 'houseInfo.loop')}}</td>
                </tr>
                <tr>
                  <th>销售状态</th>
                  <td>{{_.get(house, 'houseInfo.saleStatus') | saleStatus}}</td>
                  <th>物业类型</th>
                  <td>{{_.get(house, 'houseInfo.type') | houseType}}</td>
                </tr>
                <tr>
                  <th>占地面积</th>
                  <td>{{_.get(house, 'houseInfo.totalHouseholds')}}㎡</td>
                  <th>建筑面积</th>
                  <td>{{_.get(house, 'houseInfo.buildArea')}}㎡</td>
                </tr>
                <tr>
                  <th>容积率</th>
                  <td>{{_.get(house, 'houseInfo.volumeRate')}}</td>
                  <th>绿化率</th>
                  <td>{{_.get(house, 'houseInfo.greenRate')}}</td>
                </tr>
                <tr>
                  <th>开发商</th>
                  <td>{{_.get(house, 'houseInfo.developer')}}</td>
                  <th>物业公司</th>
                  <td>{{_.get(house, 'houseInfo.propertyCompany')}}</td>
                </tr>
              </table>
            </div>
            <div class="housing-characteristics">
              <h2>房源特色</h2>
              <table>
                <tr>
                  <th>房源标签</th>
                  <td class="tag">
                      <span>{{_.get(house,'houseTag.tagOne')}}</span>
                      <span>{{_.get(house,'houseTag.tagTwo')}}</span>
                      <span>{{_.get(house,'houseTag.tagThree')}}</span>
                      <span>{{_.get(house,'houseTag.tagFour')}}</span>
                      <span>{{_.get(house,'houseTag.tagFive')}}</span>
                      <span>{{_.get(house,'houseTag.tagSix')}}</span>
                  </td>
                </tr>
                <tr>
                  <th>核心卖点</th>
                  <td>{{_.get(house, 'houseInfo.centerSale')}}</td>
                </tr>
                <tr>
                  <th>交通出行</th>
                  <td>{{_.get(house, 'houseInfo.tranffic')}}</td>
                </tr>
                <tr>
                  <th>周边配套</th>
                  <td>{{_.get(house, 'houseInfo.arroundSupporting')}}</td>
                </tr>
                <tr>
                  <th>小区介绍</th>
                  <td>{{_.get(house, 'houseInfo.districtIntroduce')}}</td>
                </tr>
              </table>
              <p>注：土地使用起止年限详见业主土地证明材料或查询相关政府 部门的登记文件</p>
            </div>
            <NewHouseDetailTrendPicsEchart v-if="house.trendPics"
                                        :key="id"
                                        :trendPics="house.trendPics"/>
            <div class="design-sketch">
              <h2>效果图</h2>
              <div class="list">
                <div class="img">
                  <img v-if="house.houseInfo.houseImage.secondPic != ''" :src="house.houseInfo.houseImage.secondPic | picDetails"/>
                  <img v-else :src="no_image">
                </div>
                <div class="img">
                  <img v-if="house.houseInfo.houseImage.thirdPic != ''" :src="house.houseInfo.houseImage.thirdPic | picDetails"/>
                  <img v-else :src="no_image">
                </div>
                <div class="img">
                  <img v-if="house.houseInfo.houseImage.fourthPic != ''" :src="house.houseInfo.houseImage.fourthPic | picDetails"/>
                  <img v-else :src="no_image">
                </div>
                <div class="img">
                  <img v-if="house.houseInfo.houseImage.fifthPic != ''" :src="house.houseInfo.houseImage.fifthPic | picDetails"/>
                  <img v-else :src="no_image">
                </div>
                <div class="img">
                  <img v-if="house.houseInfo.houseImage.sixthPic" :src="house.houseInfo.houseImage.sixthPic | picDetails"/>
                  <img v-else :src="no_image">
                </div>
                <div class="img">
                  <img v-if="house.houseInfo.houseImage.seventhPic != ''" :src="house.houseInfo.houseImage.seventhPic | picDetails"/>
                  <img v-else :src="no_image">
                </div>
              </div>
            </div>
          </div>
          <RecommendSource :houseId="houseId" :category="category"></RecommendSource>
        </div>
      </template>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>

  import api from '@/service/api'
  export default {
    components: {
      Navigator: require('@/components/Navigator.vue'),
      FilterCategory: require('@/components/FilterCategory.vue'),
      RecommendSource: require('@/components/RecommendSource.vue'),
      NewHouseDetailTrendPicsEchart: require('@/components/NewHouseDetailTrendPicsEchart.vue'),
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        keywords: '',
        id: this.$router.currentRoute.params.id,
        house: {},
        no_image:'http://jyhimg.cdjyh.com/no_image.png?imageMogr2/thumbnail/!438x288r/gravity/SouthWest/crop/400x280/blur/1x0/quality/75|watermark/2/text/5oiQ6YO95ZCJ5YWD5rGH/font/5qW35L2T/fontsize/600/fill/I0UyRENEQw==/dissolve/100/gravity/SouthWest/dx/10/dy/10|imageslim'
      }
    },
    computed: {
      houseId () {
        return _.get(this.house, 'houseInfo.id')
      },
      category () {
        return _.get(this.house, 'houseInfo.category')
      }
    },
    beforeRouteUpdate (to, from, next) {
      this.id = to.params.id
      this.search()
      next()
    },
    methods: {
      search () {
        api.newHouseDetail(this.id).then((res) => {
          this.house = res.data
        })
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

